<!--
 * @Author: bsj
 * @Date: 2024-11-19
 * @LastEditors: baoshijie baoshijie
 * @LastEditTime: 2024-11-24 14:39:37
 * @Description: 上胶量
 * @FilePath: \computing-equipment\src\views\costParameterConfiguration\coatingWeight.vue
-->
<template>
    <div class="coatingWeight" v-loading="loading">
        <div class="optRow">
            <el-form :model="searchForm" ref="searchFormRef" :inline="true"  label-width="100px">
                <el-form-item label="帆布规格:" prop="specifications">
                    <el-input v-model="specifications" maxlength="10" placeholder="请输入帆布规格进行搜索" style="width: 190px" />
                    <el-button type="primary" @click="newItem">搜索</el-button>
                </el-form-item>
                <el-form-item label="" prop="specifications">
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <el-table :data="tableData" border style="width: 100%" :height="autoHeight">
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="expandRow">
                            <div class="item" v-for="(item, index) in props.row.list">
                                <div class="itemRow">
                                    <div class="itemRowLable">
                                        贴胶厚:
                                    </div>
                                    <div class="itemRowData">
                                        {{ item.thickness }}
                                    </div>
                                </div>
                                <div class="itemRow">
                                    <div class="itemRowLable">
                                        上胶量kg/㎡:
                                    </div>
                                    <div class="itemRowData">
                                        {{ item.amount }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="序列号" align="center" width="80" />
                <el-table-column prop="specifications" label="帆布规格"></el-table-column>
                <el-table-column prop="weight" label="帆布单重kg/㎡"></el-table-column>
                <el-table-column prop="canvasThickness" label="帆布厚"></el-table-column>
                <el-table-column prop="unitPrice" label="帆布单价"></el-table-column>
                <el-table-column prop="opt" label="操作">
                    <template #default="scope">
                        <el-link type="primary" @click="editItem(scope.row)">编辑</el-link>
                        <el-link class="optBtn" type="danger" @click="deleteItem(scope.row, scope.$index)">删除</el-link>
                        <el-link type="success" @click="copyItem(scope.row)">复制</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" top="5vh">
            <el-form :model="optParams" ref="addRef" :rules="rules" :inline="false" size="small" label-width="120px">
                <el-form-item label="帆布规格" prop="specifications">
                    <el-input v-model="optParams.specifications" maxlength="10" style="width: 200px" />
                </el-form-item>
                <el-form-item label="帆布单重kg/㎡" prop="weight">
                    <el-input v-model="optParams.weight" maxlength="10" style="width: 200px" />
                </el-form-item>
                <el-form-item label="帆布厚" prop="canvasThickness">
                    <el-input v-model="optParams.canvasThickness" maxlength="10" style="width: 200px" />
                </el-form-item>
                <el-form-item label="帆布单价" prop="unitPrice">
                    <el-input v-model="optParams.unitPrice" maxlength="10" style="width: 200px" />
                </el-form-item>
                <div class="listBox">
                    <div class="listItem" v-for="(item, index) in optParams.list" :key="index">
                        <div class="item">贴胶厚:<el-input v-model="item.thickness" maxlength="10" style="width: 100px" />
                        </div>
                        <div class="item">上胶量kg/㎡:<el-input v-model="item.amount" maxlength="10" style="width: 100px" />
                        </div>
                        <el-button-group class="ml-4">
                            <el-button type="primary" :icon="Plus" @click="insertNew(index)" />
                            <el-button type="danger" v-if="index != 0" :icon="Minus" @click="deleteListItem(index)" />
                        </el-button-group>
                    </div>
                </div>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus, Minus } from '@element-plus/icons-vue';
const loading = ref(false);
const dialogVisible = ref(false);
const dialogTitle = ref('新增');
const optParams = ref({
    specifications: '',
    weight: '',
    canvasThickness: '',
    unitPrice: '',
    list: [{
        thickness: '',
        amount: ''
    }]
});
const addRef = ref(null)
const rules = reactive({
    specifications: [
        { required: true, message: '请输入帆布规格', trigger: 'blur' }
    ],
    weight: [
        { required: true, message: '请输入帆布单重kg/㎡', trigger: 'blur' }
    ],
    canvasThickness: [
        { required: true, message: '请输入帆布厚', trigger: 'blur' }
    ],
    unitPrice: [
        { required: true, message: '请输入帆布单价', trigger: 'blur' }
    ]
})
const isEidt=ref(false)
function handleAdd() {
    isEidt.value=false
    dialogVisible.value = true;
    dialogTitle.value = '新增';
    optParams.value = {
        specifications: '',
        weight: '',
        canvasThickness: '',
        unitPrice: '',
        list: [{
            thickness: '',
            amount: ''
        }]
    }
}
function editItem(row) {
    isEidt.value=true
    optParams.value = JSON.parse(JSON.stringify(row));
    dialogVisible.value = true;
    dialogTitle.value = '编辑';
}
function deleteItem(row, index) {
    ElMessageBox.confirm('是否删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 删除数据
        tableData.value.splice(index, 1);
    }).catch(() => { });
}
function copyItem(row) {
    let data = JSON.parse(JSON.stringify(row));
    data.specifications = ''
    data.id = ''
    optParams.value = data;
    dialogVisible.value = true;
    dialogTitle.value = '新增';
}
function deleteListItem(index) {
    // 删除指定下标的数据
    optParams.value.list.splice(index, 1);
}
function insertNew(index) {
    // 在指定位置插入一条空数据
    optParams.value.list.splice(index + 1, 0, { thickness: '', amount: '' });
}
const submitForm = async () => {
    if (!addRef.value) return
    await addRef.value.validate((valid, fields) => {
        if (valid) {
            if(isEidt.value==false){  
                tableData.value.push(optParams.value)
            }
            ElMessage.success('保存成功')
            dialogVisible.value = false
        } else {
            console.log('error submit!', fields)
        }
    })
}
const tableData = ref([{
    specifications: 'EP100',
    weight: '0.366',
    canvasThickness: '0.5',
    unitPrice: '17',
    list: [{
        thickness: '1',
        amount: '0.844'
    }, {
        thickness: '1.1',
        amount: '0.844'
    }, {
        thickness: '1.2',
        amount: '0.844'
    }, {
        thickness: '1.3',
        amount: '0.844'
    }, {
        thickness: '1.4',
        amount: '0.844'
    }, {
        thickness: '1.5',
        amount: '0.844'
    }, {
        thickness: '1.6',
        amount: '0.844'
    }, {
        thickness: '1.7',
        amount: '0.844'
    }, {
        thickness: '1.8',
        amount: '0.844'
    }]

}, {
    specifications: 'EP125',
    weight: '0.44',
    canvasThickness: '0.6',
    unitPrice: '18',
    list: [{
        thickness: '1',
        amount: '0.844'
    }, {
        thickness: '1.1',
        amount: '0.844'
    }, {
        thickness: '1.2',
        amount: '0.844'
    }, {
        thickness: '1.3',
        amount: '0.844'
    }]

}]);
const autoHeight = ref(500)
onMounted(() => {
    autoHeight.value = document.documentElement.clientHeight - 150;
})
</script>
<style lang="scss" scoped>
.coatingWeight {
    .optRow {
        // margin-bottom: 10px;
    }

    .expandRow {
        display: flex;
        padding: 10px 20px;
        flex-wrap: wrap;
        gap: 20px;

        .item {
            min-width: 180px;
            padding: 5px 5px;
            display: flex;
            flex-direction: column;
            border: 1px solid #ccc;
            border-radius: 5px;

            .itemRow {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;

                .itemRowLable {
                    flex: 1;
                }

                .itemRowData {
                    flex: 1;
                    text-align: left;
                }
            }
        }
    }

    .optBtn {
        margin: 0 5px;
    }

    .listBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        padding-left: 20px;
        max-height: 320px;
        overflow-y: auto;

        .listItem {
            display: flex;
            gap: 5px;
            margin-bottom: 10px;
        }
    }
}
</style>
